<template>
    <div class="salary-content">
      <!-- 头部搜索框 -->
      <div class="find">
        <el-form :inline="true" :model="input" class="input">
          <el-form-item label="姓名:">
            <el-input v-model="input.input1" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="岗位:">
            <el-input v-model="input.input2" placeholder="请输入岗位"></el-input>
          </el-form-item>
          <el-form-item label="用工性质:">
            <el-input v-model="input.input3" placeholder="请输入用工性质"></el-input>
          </el-form-item>
          <el-form-item label="入职日期:">
            <el-date-picker
            v-model="value7"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2">
        </el-date-picker>
          </el-form-item>
          <el-form-item label="户籍地:">
            <el-input v-model="input.input4" placeholder="请输入户籍地"></el-input>
          </el-form-item>
          <el-form-item label="学历:">
            <el-input v-model="input.input5" placeholder="请输入学历"></el-input>
          </el-form-item>
          <!-- 查询 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search el-icon--right" class="find-button">查询</el-button>
          </el-form-item>
          <!-- 查询结束 -->
          <!-- 上传 -->
          <el-form-item>
             <el-button type="primary" @click="onUpload" icon="el-icon-upload el-icon--right" class="find-button">上传</el-button>
          </el-form-item>
          <!-- 上传结束 -->
          <!-- 下载 -->
          <el-form-item>
            <el-button type="primary" @click="onDownload" icon="el-icon-download el-icon--right" class="find-button">下载</el-button>
          </el-form-item>
          <!-- 下载结束 -->
        </el-form>
      </div>
      <!-- 头部搜索框结束 -->
      <hr style="height:1px;border:none;border-top:1px solid #c0c4cc;">
      <!-- table 表格内容 -->
      <div class="table-salary">
        <el-table
          :data="
              tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
          fit
          border
          height="560"
          style="width: 100%">
          <el-table-column
            align="center"
            fixed="left"
            type="index"
            label="序号"
            width="50"
            >
          </el-table-column>
          <el-table-column
            align="center"
            fixed="left"
            prop="name"
            label="姓名"
            >
          </el-table-column>
          <el-table-column
            align="center"
            fixed="left"
            prop="job"
            label="岗位"
            width="120"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="project"
            label="所在项目"
            show-overflow-tooltip
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="gender"
            label="性别"
            show-overflow-tooltip
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="domicile"
            label="户籍地"
            width="100"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="degree"
            label="学历"
            width="100"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="entryData"
            label="入职日期"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="formal"
            label="转正日期"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="salary"
            label="薪资（正式）"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="perAnalysis"
            label="人员性格分析"
            show-overflow-tooltip
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="remark"
            label="备注（办理人）"
            >
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="200"
            >
            <template slot-scope="scope">
              <el-button type="primary" @click="dialogVisible = true, edit(scope)" size="small">编辑</el-button>
              <!-- 点击编辑后弹框 -->
              <el-dialog title="编辑" :visible.sync="dialogVisible" :append-to-body="true" width="1200px" lock-scroll>
                <div class="edit" style="height:600px;overflow:scroll;overflow-x:hidden;">
                  <el-form :model="form1" :rules="rules" ref="form1" label-width="180px"  class="demo-ruleForm" size="mini">
                    <el-form-item label="人员性格分析：" prop="perAnalysis">
                      <el-input v-model="form1.perAnalysis" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所在项目：" prop="project">
                      <el-input v-model="form1.project" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right:80px;margin-bottom:10px">
                      <el-button type="primary" @click="submitEditForm('form1')">保存</el-button>
                      <el-button @click="resetEditForm('form1')">重置</el-button>
                    </el-form-item>
                  </el-form> 
                </div>
              </el-dialog>
              <!-- 弹框结束 -->
              <el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表格结束 -->
      <!-- 底部 分页 -->
      <div class="footer">
        <div class="page">
          <el-pagination
            :page-size="pageSize"
            :page-sizes="[5,10,20]"
            :current-page="currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click="upChange"
            @next-click="nextChange"
            >
          </el-pagination>
        </div>
      </div>
      <!-- 分页结束 -->
    </div>
  </template>
  
  <script>
    export default {
       methods: {
        handleClick(row) {
          console.log(row);
        },
        // 查询按钮
        onSubmit() {
          console.log('submit!');
        },

        // 重置按钮
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 上传按钮
        onUpload() {
          console.log('onUpload!');
        },
        // 下载按钮
        onDownload() {
          console.log('onDownload!');
        },
        // 分页功能
        // 分页处理
        //改变每页显示的数量
        handleSizeChange(val) {
          console.log(`每页${val}条`);
          this.pageSize = val;
          this.currentPage = 1;
        },
        //更改页码
        handleCurrentChange(val) {
          console.log(`当前页${val}条`);
          this.currentPage = val;
        },
        //上一页
        upChange(val) {
          console.log(val);
          this.currentPage -= 1; //动态改变
        },
        //下一页
        nextChange(val) {
          this.currentPage += 1; //动态改变
        },
        // 分页结束
        // 编辑按钮
        edit(scope){
          console.log(scope.row);
          this.form1 = scope.row;
        },
        // 编辑后的保存按钮和编辑按钮
        submitEditForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('保存成功!');
              this.dialogVisible = false;
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        // 重置按钮
        resetEditForm(formName) {
            this.$refs[formName].resetFields();
        },
      },
  
      data() {
        return {
          // 入职时间：
          pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },        
        value6: '',
        value7: '',
          // 搜索框数据
          input:{
            input1:'',
            input2:'',
            input3:'',
            input4:'',
            input5:'',
          },
          // 编辑按钮的数据
          dialogVisible: false,
          form1:{
            name: '',
            job: '',
            project: '',
            gender: '',
            domicile: '',
            degree:'',
            entryData:'',
            formal:'',
            salary:'',
            perAnalysis:'',
            remark:'',
          },
          // 分页数据
          pageSize: 5, // 一个的数据条数
          currentPage: 1, // 当前页从哪页开始
          total: 100, // 设置总数
          // 表格数据
          tableData: [{
            emp_id: '1',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '2',
            name: '李四',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '3',
            name: '王五',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '4',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '5',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '6',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '7',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '8',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '9',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
            
          },{
            emp_id: '10',
            name: '张三',
            job: '人事专员',
            project: '金融事业部',
            gender: '男',
            domicile: '吉林',
            degree:'本科',
            entryData:'2022/03/01',
            formal:'2022/06/01',
            salary:'1500+1500',
            perAnalysis:'性格乐观开朗，工作认真负责，沟通积极主动，虚心学习',
            remark:'人事XXX',
          },
        ], 
        }
      }
    }
  </script>
  
  <style lang="less" scoped>
  .salary-content{
    height: 760px;
    padding: 20px;
    background-color: #ffffff;
  }
  // 新增弹框样式
  .form{
    .el-form{
      .el-input{
        width: 200px;
        margin-right: 40px;
        margin-left: -80px;
      }
      .el-select{
        width: 200px;
        margin-right: 40px;
        margin-left: -80px;
  
      }
      .el-date-picker{
        width: 200px;
        margin-right: 40px;
        margin-left: -80px;
  
      } 
    }
  }
  // 新增弹框样式结束
  // 编辑弹框样式
  .edit{
    .el-form{
      .el-input{
        width: 200px;
      }
      .el-select{
        width: 200px;
      }
      .el-date-picker{
        width: 200px;
      } 
    }
  }
  // 编辑弹框样式结束
  .table-salary{
    height: 620px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  
  .find{
    margin-top: 20px;
  }
  
  .footer{
    position: fixed;
    bottom: 67px;
    right: 50px;
  }
  
  </style>